<?php
// ramka - a single page photo album
// Paul Philippov, paul@ppds.ws

$title = "ramka - a single page photo album";
$image_dir = "images";

// you really don't want to edit anyting below this line //

$image_path = realpath($image_dir);
$images = all_files($image_path);

function all_files($dir_name) {
  if(!file_exists($dir_name)) return;
  if (false === $di = new DirectoryIterator($dir_name))
    return false;
  $array = array();
  foreach ($di as $file)
    if (!$file->isDot())
      $array[] = $file->getFilename();
  sort($array);
  return $array;
}

function all_images($dir) {
  return glob("{$dir}/{*.gif,*.jpg,*.png,*.GIF,*.JPG,*.PNG}", GLOB_BRACE);
}

function humanize($text) {
  $file = pathinfo($text);
  $title = str_replace('_', ' ', $file['filename']);
  return $title; // ucwords($title);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Paul Philippov, paul@ppds.ws" />
<style type="text/css">
/*<![CDATA[*/
body {
  font:12px lucida grande, verdana, sans-serif;
}
img {
  border:0 none; display:block; margin:auto;
}
h1, h2, p {
  margin:0 0 0.5em;
}
h1 {
  color:#aaa;
}
h2 {
  color:#666;
}
a {
  color:#369; text-decoration:none;
}
.item {
  display:block; padding:1px 7px; margin:1px;
}
.item:hover {
  background:#ddd;
}
.item.on {
  background:#666; color:#fff;
}
#container {
  margin:0; padding:20px;
}
#copyright {
  position:absolute; bottom:0; right:0; left:0; font-size:10px; line-height:30px; color:#666; margin:0; padding-left:2em;
}
#menu_wrapper {
  position:absolute; top:130px; bottom:30px; right:20px; width:250px; overflow:hidden;
}
#canvas {
  position:absolute; top:130px; bottom:30px; left:20px; right:280px; overflow:auto; border:dotted 1px #555;
}
#canvas h4 {
  position:absolute; top:0; right:0; padding:3px 7px; background:#c00; color:#fff;
}
#info {
  font-size:10px;
}
/*]]>*/
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  var padding = 10;
  var canvasWidth;
  var canvasHeight;

  $(window).resize(function(){
    canvasWidth = $('#canvas').width() - 2 * padding;
    canvasHeight = $('#canvas').height() - 2 * padding;
    $('.item.on').click();
  });

  $('#canvas').click(function(){
    $('body').css({backgroundColor: $('body').css('backgroundColor') == 'black' ? 'white' : 'black' })
  });

  $('#menu_wrapper').mousemove(function(e){
    var oh = $('#menu').outerHeight();
    var th = $(this).height();
    var top = (e.pageY - $(this).offset().top) * (oh + oh / 8 * 2 - th) / th - oh / 8;
    $(this).scrollTop(top > 0 ? Math.round(top) : 0);
  });

  $('.item').click(function(){
    $('#canvas').prepend($('<h4>').html('loading file'));
    $('*').css({cursor:'progress'});
    $('<img>').attr('src', $(this).attr('href')).load(function(){
      $(this).addClass('image').css({
        maxWidth: canvasWidth,
        maxHeight: canvasHeight
      }).prependTo($('#canvas')).nextAll().remove();
      var imageHeight = $(this).attr('height');
      var marginTop = Math.round((canvasHeight - imageHeight) / 2) + padding;
      $(this).css({ marginTop: marginTop > 0 ? marginTop : padding });
      $('#info').html('<a href="' + $(this).attr('src') + '">download original file<'+'/a>');
      $('*').css({cursor:'default'});
    });
    $('#title').html($(this).text());
    $('.item.on').removeClass('on');
    $(this).addClass('on');
    return false;
  });

  $('.item:first').addClass('on');
  $(window).resize();
});
//]]>
</script>
</head>
<body>
<div id="container">
  <h1><?php echo $title ?></h1>
  <h2 id="title"></h2>
  <p id="info"></p>
<?php if (sizeof($images) > 0) { ?>
  <div id="canvas"></div>
  <div id="menu_wrapper">
    <div id="menu">
<?php foreach ($images as $file)
  echo '<a class="item" href="'.rawurlencode($image_dir).'/'.rawurlencode($file).'">'.humanize($file)."</a>\n"; ?>
    </div>
  </div>
<?php } else echo "<h3>Please upload photos to {$image_dir}/ directory</h3>"; ?>
  <p id="copyright">
    <a href="http://ramka.googlecode.com/"><strong>ramka</strong></a> by
    <a href="http://paulphilippov.com/">Paul Philippov</a> is licensed under a
    <a rel="license" href="http://www.opensource.org/licenses/bsd-license.php">New BSD License</a>.
  </p>
</div>
</body>
</html>
